<template>
  <div>
    <!-- 面包屑 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened" :to="{ path: '/stateAdmin' }"><a href="/">积分商城</a></el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">状态管理</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">商品详情</el-breadcrumb-item>
        </el-breadcrumb>  
      </div>
    <!-- 步骤条 -->
    <div class="x_step">
      <el-steps :active="2" align-center>
        <el-step title="买家下单" description="2022-10-10"></el-step>
        <el-step title="买家付款" description="2022-10-10"></el-step>
        <el-step title="商家发货" description="2022-10-10"></el-step>
        <el-step title="订单完成" description="2022-10-10"></el-step>
      </el-steps>
    </div>
    <!-- 订单卡片 -->
    <div class="x_card">
        <el-card class="box-card">
            <div class="text item">
              <div v-for="item in dataList" :key="item.id">
                <p>订单编号:&nbsp;&nbsp;{{item.listcode}}</p>
                <p>付款方式:&nbsp;&nbsp;{{item.pay}}</p>
                <p>买家:&nbsp;&nbsp;{{item.payler}}</p>
                <p>配送方式:&nbsp;&nbsp;{{item.postway}}</p>
                <p>收货地址:&nbsp;&nbsp;{{item.location}}</p>
              </div>
              <el-row>
                <el-button type="primary" @click="editGoods(index)">修改订单收货信息</el-button>
            </el-row>
            </div>
           
        </el-card>
        <el-card class="box-card">
            <div class="text item">
              <p class="x_gState">订单状态: 
                <span style="font-size:18px;color:lightsalmon;font-weight:bold">待发货</span>
                (买家已付款,请商家尽快发货)
              </p>
              <el-row style="margin-top: 20px;">
                    <el-button type="primary" @click="sendCheck">确认发货</el-button>
              </el-row>
              <p class="x_friendTips" style="margin-top: 20px;">友情提示:如果无法进行发货,请及时联系买家进行妥善处理</p>
                
            </div>
        </el-card>
    </div>
    <!-- 商品信息 --> 
    <div class="x_goodsInfo">
      <div>
        <table border="1" class="x_shopForm" 
        style="border-collapse:collapse; margin-top:45px;">
        <caption style="font-size:16px;">商品信息</caption>
          <tr>
            <th>商品标题</th>
            <th>规格、编号、条码</th>
            <th>单价</th>
            <th>数量</th>
            <th>原价</th>
            <th>状态</th>
          </tr>
          <tr>
            <td>
              <img src="" alt="">
              <span>三公仔小儿七星茶颗粒</span>
            </td>
            <td>
              <p>规格：无</p>
              <p>编码：无</p>
              <p>条码：无</p>
            </td>
            <td>30积分</td>
            <td>1个</td>
            <td>30积分</td>
            <td>已付款</td>
          </tr>
          <tr>
              <td colspan="6">
                <div class="x_money">
                  <p><span>商品小计：</span><span>30积分</span></p>
                  <p><span>优惠：</span><span>￥0.00</span></p>
                  <p><span>实付款：</span><span>30积分</span></p>
                </div>
              </td>
          </tr>
        </table>

      </div>
    </div>
    
    <!-- 模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="收货地址" prop="pass">
          <el-input  v-model="ruleForm.location" ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="checkPass">
          <el-input  v-model="ruleForm.payler" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getStatusDetailApi,editStatusList} from '../../../api'
export default {
  data() {
    return {
        dataList:[],
        ruleForm: {
          location:"",
          payler:"",
        },
        dialogVisible: false
    }
  },
  created() {
    getStatusDetailApi().then(res => {
      this.dataList = res.data
    })
  },
  methods: {
    //模态框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      editGoods(e) {
        this.ruleForm = this.dataList[e]
        console.log(e);
        this.dialogVisible = true
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            console.log(this.ruleForm);
            editStatusList(this.ruleForm).then(res => {
              console.log(res)
              this.dialogVisible = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogVisible = false
      },
      sendCheck() {
        this.$router.push('/sendCheck')
      }
    },
}
</script>

<style lang="scss" scoped>
.x_step {
  width: 1000px;
  margin: 50px auto;
}
.x_goodsTable {
  margin: 20px auto;
  width: 1000px;
}
.x_card {
    display:flex;
    width:800px;
    margin: auto;
    .text {font-size: 14px;}
  .item {padding: 18px 0;}

  .box-card {width: 480px;}
}
.x_goodsInfo {
    width:1000px;
    margin:auto;
    .x_shopForm{
        width: 80%;
        margin: auto;
        // border: 1px solid gray;
        text-align: center;
        tr{border:none}
      }
    .x_money{
      float:right;
      margin-right: 40px;
    }
}

.box-card {
  display:flex;
  span{
    font-size:14px;
    display:inline-block;

  }
}
</style>